import { connect } from 'umi';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import zhCN from 'antd/lib/locale/zh_CN';
import {
  ConfigProvider,
  Card,
  Typography,
  Table,
  Row,
  Collapse,
  Col,
  Divider,
} from 'antd';
import './index.less';
const { Panel } = Collapse;
const columns = [
  {
    title: '课程全称',
    dataIndex: 'courseName',
    width: '33.33%',
    align: 'center',
  },
  {
    title: '课程学分',
    dataIndex: 'credit',
    sorter: (a, b) => a.credit - b.credit,
    width: '33.33%',
    align: 'center',
  },
  {
    title: '课程成绩',
    dataIndex: 'score',
    sorter: (a, b) => a.score - b.score,
    width: '33.33%',
    align: 'center',
  },
];
const columns1 = [
  {
    title: '本学期课程总数',
    dataIndex: 'courseNumber',
    width: '33.33%',
    align: 'center',
  },
  {
    title: '本学期获得学分',
    dataIndex: 'credit',
    width: '33.33%',
    align: 'center',
  },
  {
    title: '本学期学分绩点',
    dataIndex: 'gpa',
    width: '33.33%',
    align: 'center',
  },
];
interface DataType {
  courseNumber: number;
  gpa: number;
  credit: number;
  courseGradeList: [
    {
      courseName: string;
      credit: number;
      score: number;
      examDate: string;
      id: number;
    },
  ];
}
const Detailscore: React.FC<any> = (props: any) => {
  const [data, setData] = useState<DataType[]>([]);
  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getGradeSummaryScoreDetialEffects',
        payload: {
          data: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            setData(value);
          },
        },
      });
    }
  };
  const IsSemester = (value: any) => {
    if (value.credit === 0)
      return <div style={{ color: 'gray' }}>未修学期</div>;
    else return <div></div>;
  };
  useEffect(() => {
    console.log(props.user);
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);
  return (
    <div>
      <Card>
        <Typography.Title level={4} style={{ marginBottom: 0 }}>
          详细成绩展示
        </Typography.Title>
      </Card>
      <Card>
        <Row gutter={8}>
          {data.map((student) => (
            <Col span={12} key={student?.courseGradeList[0]?.id}>
              <Collapse>
                <Panel
                  header={student?.courseGradeList[0]?.examDate}
                  extra={IsSemester(student)}
                >
                  {/* 学期总的成绩 */}
                  <ConfigProvider locale={zhCN}>
                    <Table
                      dataSource={[student]}
                      columns={columns1}
                      pagination={false}
                      rowKey={() => Math.random()}
                    />
                  </ConfigProvider>
                  {/* 各科的成绩 */}
                  <ConfigProvider locale={zhCN}>
                    <Table
                      dataSource={student?.courseGradeList}
                      columns={columns}
                    />
                  </ConfigProvider>
                </Panel>
              </Collapse>
            </Col>
          ))}
        </Row>

        <Divider />
      </Card>
    </div>
  );
};

export default connect(({ Model_SecondExampleModel, user }: any) => ({
  Model_SecondExampleModel,
  user,
}))(Detailscore);
